<template>
  <div class="login_container">
    <div class="login-div">
      <div class="logo-div"></div>
      <div class="form-div">
        <div class="parcel-div">
          <el-form ref="loginForm">
            <div class="tip-div">
              <span>公共场所不建议自动登录, 以防账号丢失</span>
            </div>
            <div class="account-div">
              <div class="parcel-div">
                <span class="fa fa-user-o fa-lg"></span>
              </div>
              <input
                class="account-input"
                type="text"
                placeholder="请输入用户名"
                v-model.trim="loginForm.uUsername"
                autocomplete="off" />
            </div>
            <div class="account-tip-div">{{ tipInfo.account }}</div>
            <div class="pwd-div">
              <div class="parcel-div">
                <span class="fa fa-lock fa-lg"></span>
              </div>
              <input class="pwd-input" type="password" placeholder="请输入密码" v-model.trim="loginForm.uPassword" />
            </div>
            <div class="pwd-tip-div">{{ tipInfo.pwd }}</div>
            <div class="button-div">
              <button type="submit" @click="submitForm">Login</button>
            </div>
            <div class="login-tip-div" ref="login-tip-div"></div>
            <div class="text-div">
              <router-link to="/register">免费注册</router-link>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <router-link to=""> 忘记密码 </router-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        uUsername: 'chucha',
        uPassword: '2578590821Jqx&'
      },
      tipInfo: {
        account: '',
        pwd: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.tipInfo = {
        account: '',
        pwd: ''
      }
      this.$http
        .post('/user/login', this.loginForm)
        .then(res => {
          if (res.state === false) {
            if (res.code === '1') {
              this.tipInfo.account = res.errorMsg
            } else {
              this.tipInfo.pwd = res.errorMsg
            }
            return
          }
          window.localStorage.setItem('token', 'Bearer ' + res.data)
          this.$router.push('/homePage')
        })
        .catch(err => this.$message.error(err))
    }
  }
}
</script>

<style lang="less" scoped>
.login-tip-div {
  color: red;
}
a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
}

.login_container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('@/assets/images/landscapePhoto.jpg');
}

.login-div {
  top: 22%;
  right: 8%;
  width: 28%;
  height: 56%;
  float: right;
  min-width: 420px;
  min-height: 425px;
  border-radius: 5px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.1);
}

.logo-div {
  height: 25%;
  background-size: 30%;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  background-image: url('@/assets/images/logo.png');
}

.form-div {
  height: 75%;
}

.form-div > .parcel-div {
  width: 60%;
  height: 100%;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tip-div {
  height: 20px;
  font-size: 14px;
  text-align: center;
  color: rgb(117, 117, 117);
  border: 2px solid rgb(249, 215, 184);
  background-color: rgb(251, 232, 204);
}

.account-div {
  margin-top: 20px;
}

.account-div,
.pwd-div {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
}

.account-div .parcel-div,
.pwd-div .parcel-div {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-div .parcel-div span,
.pwd-div .parcel-div span {
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
}

input {
  width: 100%;
  border: none;
  height: 1.3em;
  outline: none;
  font-size: 20px;
  color: black;
  padding: 3% 5% 3% 0%;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0);
}

::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.account-tip-div,
.pwd-tip-div,
.login-tip-div {
  height: 20px;
  color: red;
  line-height: 20px;
  transition: all 0.5s ease;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.button-div button {
  width: 100%;
  height: 2em;
  border: none;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.5s ease;
  color: rgb(251, 237, 232);
  background-color: #009688;
}

.button-div button:hover {
  background-color: #c10000;
}

.text-div {
  text-align: right;
}

.successClass {
  color: rgb(0, 255, 0);
}

.errorClass {
  color: rgb(255, 0, 0);
}
</style>
